<script setup lang="ts">
import { onPageScroll } from "@dcloudio/uni-app";
import { ref } from "vue";

const popupVisible = ref(false);
const recommendType = ref('year');
const role = ref('');

function handleSelect(type: string){
  role.value = type;
  popupVisible.value = true
}

function handleToNextPage() {
  let url = `/pages/recommend/form-year`;
  switch (recommendType.value) {
    case 'month':
      url = `/pages/recommend/form-month`;
      break;
    case 'self':
      url = `/pages/recommend/form-self`;
      break;
  
    default:
      url = `/pages/recommend/form-year`;
      break;
  }
  uni.navigateTo({url});
}

const tabs = [
  {
    key: 'year',
    icon: 'https://static.minglvtang.com/images/icons/recommend_year.png',
    label: '推荐律师'
  },
  {
    key: 'month',
    icon: 'https://static.minglvtang.com/images/icons/recommend_month.png',
    label: '奖项申报'
  },
  {
    key: 'self',
    icon: 'https://static.minglvtang.com/images/icons/recommend_self.png',
    label: '个人申报'
  },
]

// 吸顶变色
const isScrolled = ref(false);
onPageScroll((e)=>{
  isScrolled.value = e.scrollTop > 0;
});
</script>

<template>
  <view class="relative overflow-hidden">
    <page-navbar title="选择身份" :isScrolled="isScrolled"></page-navbar>
    <view class="mx-4 mt-10 text-(2xl black/80)">选择您的身份</view>
    <view class="mx-4 grid gap-4 mt-5">
      <image class="w-full align-middle" src="https://static.minglvtang.com/images/btn_lvshi.png" mode="widthFix" @click="handleSelect('律师')" />
      <image class="w-full align-middle" src="https://static.minglvtang.com/images/btn_fawu.png" mode="widthFix" @click="handleSelect('法务')" />
      <image class="w-full align-middle" src="https://static.minglvtang.com/images/btn_lvsuo.png" mode="widthFix" @click="handleSelect('律所')" />
      <image class="w-full align-middle" src="https://static.minglvtang.com/images/btn_qiye.png" mode="widthFix" @click="handleSelect('企业')" />
    </view>

    <view class="fixed inset-0 z-50 bg-black/60 w-screen h-screen" v-show="popupVisible">
      <view class="absolute left-50% top-50% -translate-50% w-86 rounded-2xl p-5 box-border bg-white">
        <view class="flex items-center justify-between">
          <view class="text-lg">选择申报类型</view>
          <view class="i-ri-close-large-line" @click="popupVisible = false"></view>
        </view>
        <view class="grid grid-cols-3 gap-3 my-5">
          <view
            class="bg-#F8F8F8 h-26 flex flex-col items-center justify-evenly rounded-lg relative border-(2 solid)"
            v-for="item in tabs"
            :key="item.key"
            :class="recommendType == item.key ? 'border-#1373FF': 'border-white'"
            @click="recommendType = item.key"
          >
            <view class="absolute right-0 top-0" v-show="recommendType == item.key">
              <image class="w-8" src="https://static.minglvtang.com/images/icons/recommend_checked.png" mode="widthFix" />
            </view>
            <image class="w-14 align-middle" :src="item.icon" mode="widthFix" />
            <view>{{item.label}}</view>
          </view>
        </view>

        <uv-button
          type="primary"
          size="large"
          text="下一步"
          :custom-style="{
            fontSize: '18px',
            backgroundImage: 'linear-gradient(to right, #5199F9, #0164E6)',
            height: '48px',
            borderRadius: '8px',
            borderColor: 'transparent'
          }"
          @click="handleToNextPage"
        ></uv-button>
      </view>
    </view>
  </view>
</template>
